<template>
  <div id="cesiumContainer" style="width: 100vw; height: 100vh">
    <!-- <ParameterForm ref="parameterFormRef"></ParameterForm> -->
    <!-- <EditRoute ref="editRouteRef"></EditRoute> -->
    <FFmpegWorker style="position: absolute; top: 0; left: 0;z-index: 1000;"></FFmpegWorker>
  </div>
</template>

<script setup>
import { onMounted, nextTick, ref } from "vue";
import * as Cesium from 'cesium';
import ParameterForm from "./edit/ParameterForm.vue";
import FFmpegWorker from "./FFmpegWorker.vue";
import BaseCesiumClass from "./BaseCesiumClass.js";
import SpaceGridClass from "./SpaceGridClass.js";
import AirLineClass from "./AirLineClass.js";
import FlexBox from "./FlexAutoBox.js";
import BDRegionCode from "./BDRegionCode.js";
import LineAndSurfacePrimitive from "./CustomPrimitive.js";
// import EditRoute from "./uavroute/EditRoute.vue";

let myxViewer = null
let flexbox = null
let cusPri = null
let webrtcArr = ['A', 'B', 'C']
// const editRouteRef = ref(null)
const parameterFormRef = ref(null)
const initCesium = (myViewer) => {
  // editRouteRef.value.initPosList(myViewer);
  // parameterFormRef.value.initForm(myViewer);
  const destination = Cesium.Cartesian3.fromDegrees(110.0001, 39.99925, 100.0);
  myViewer.camera.flyTo({
    destination: destination,
    orientation: {
      heading: Cesium.Math.toRadians(0.0),
      pitch: Cesium.Math.toRadians(-45.0),
      roll: 0.0,
    },
    duration: 2.0,
  });

  // const bdrc = new BDRegionCode(myViewer);
  // bdrc.flyToDefaultPos()
  // bdrc.getGridCodeBD()
  // 使用示例
  // const positions = new Float64Array([
  //   0.0, 0.0, 0.0,
  //   700000.0, 0.0, 0.0,
  //   0.0, 700000.0, 0.0,
  //   700000.0, 700000.0, 0.0,
  //   0.0, 0.0, 700000.0,
  // ]);
  // flexbox = new FlexBox(myViewer);
  // // 调整视角
  // const destination = Cesium.Cartesian3.fromDegrees(110.0001, 39.99925, 100.0);
  // myViewer.camera.flyTo({
  //   destination: destination,
  //   orientation: {
  //     heading: Cesium.Math.toRadians(0.0),
  //     pitch: Cesium.Math.toRadians(-45.0),
  //     roll: 0.0,
  //   },
  //   duration: 2.0,
  // });
  // let lastRenderTime = 0;  // 记录上次触发的时间
  // const interval = 1000;     // 设置触发的时间间隔（毫秒）

  // cusPri = new CustomPrimitive(myViewer);
  // cusPri.testPrimitive()

  // 创建一个自定义的 LineAndSurfacePrimitive 实例
  // const customPrimitive = new LineAndSurfacePrimitive({ color: Cesium.Color.YELLOW });
  // myViewer.scene.primitives.add(customPrimitive);

  // myViewer.scene.postRender.addEventListener((scene, time) => {
  //   const currentTime = time.secondsOfDay * 1000;  // 将时间转换为毫秒
  //   // 如果当前时间与上次触发时间的间隔超过设定的间隔，则执行回调
  //   if (currentTime - lastRenderTime >= interval) {
  //     lastRenderTime = currentTime;
  //     // 在这里执行渲染后的操作
  //     console.log('Render complete', time);
  //     flexbox.addFlexBox();
  //     console.log(myViewer.scene.primitives.length);
  //   }
  // });
}
onMounted(async () => {
  await nextTick();
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ODRiMTU0NS05NmJlLTRhNzYtYjA3OS02N2JmY2RhMDE0NDgiLCJpZCI6MTA3OTM5LCJpYXQiOjE2NjMxMjk1Nzd9.XmVmA2d7T2qG6y4vAcQrmb9msWbnLxCe5qYtnlK8h5k";
  myxViewer = new Cesium.Viewer('cesiumContainer', {
    selectionIndicator: false,
    infoBox: false,
    orderIndependentTranslucency: false,
    shouldAnimate: true,
    geocoder: false,//搜索框
    homeButton: false,//home按键
    animation: false,//动画控件
    fullscreenButton: false,//全屏按钮
    sceneModePicker: false,//2D/3D切换按钮
    timeline: false,//时间线
    navigationHelpButton: false,//帮助按钮
    baseLayerPicker: false,//图层选择按钮
  })
  // const terrainProvider = new Cesium.CesiumTerrainProvider({
  //   url: 'https://assets.cesium.com/1/',  // 自定义地形数据服务URL
  //   requestVertexNormals: true,  // 启用法线数据，增强渲染效果
  // });
  // myxViewer.terrainProvider = terrainProvider;
  initCesium(myxViewer)
});
</script>

<style scoped>
.base-player-box {
  width: 300px;
  height: 200px;
  padding: 10px;
  border-right: #212121 solid;
  border-bottom: solid #212121;
}

.player-holder {
  width: 100%;
  height: 20px;
  font-size: 18px;
  color: #212121;
  padding: 5px;
}

.player-container {
  width: 100%;
  height: 100%;
}
</style>